<template>
  <div>
    <div class="timeline">
      <div class="entry" v-for="(item, index) in list" :key="index">
        <div class="d-flex">
          <div class="title">
            <h3>{{ item.date }}</h3>
          </div>
          <div class="body" @click="detail(index)">
            <div class="d-flex content" id="history-detail">
              <p>{{ item.title }}</p>
              <img :src="item.imgUrl" lazy-load="true" v-show="item.imgUrl">
            </div>
          </div>
        </div>
        <div class="add historyAD" v-show="(index + 1 ) % 5 === 0">
        </div>
      </div>
    </div>
    <infinite-loading @infinite="infiniteHandler" :distance="distance" ref="infiniteLoading" v-if="!noData">
      <span slot="no-more" class="noData">
        没有更多了
      </span>
    </infinite-loading>
    <p v-else class="noData">没有更多了</p>
    <!-- <p v-show="errorData" class="noData">没有数据</p> -->
  </div>
</template>
<script>
import mixin from '../mixins/mixin'
import InfiniteLoading from 'vue-infinite-loading'
export default {
  mixins: [mixin],
  components: {
    InfiniteLoading
  },
  props: {
    tab: {
      type: Number,
      default: 0
    },
    date: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      list: [],
      page: 0,
      totalPage: 5,
      distance: 500,
      noData: false
    }
  },
  watch: {
    date (val) {
      this.resetData()
      this.getHistoryToday()
    }
  },
  methods: {
    infiniteHandler () {
      if (this.totalPage > this.page) {
        this.page++
        this.getHistoryToday()
      } else {
        this.noData = true
        // this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
      }
    },
    // 获取历史上的今天
    getHistoryToday () {
      this.$http.get({
        url: this.$services.GET_HISTORY_TODAY,
        data: {
          page: this.page,
          pageSize: 5,
          d: this.date,
          type: '1'
        }
      }).then(res => {
        if (res.body.data[0] !== null) {
          this.totalPage = res.body.pageInfo.totalPage
          this.list = this.list.concat(res.body.data)
          for (const v of this.list) {
            v.date = v.date.slice(0, 4).replace('年', '')
            if (v.picUrl !== '') {
              v.imgUrl = JSON.parse(v.picUrl)[0].url
            } else {
              v.imgUrl = ''
            }
          }
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
          let adDiv = document.getElementsByClassName('historyAD')
          setTimeout(() => {
            for (var i = 0; i < adDiv.length; i++) {
              if (adDiv[i].children.length === 0) {
                let scriptDom = document.createElement('script')
                scriptDom.type = 'text/javascript'
                scriptDom.src = 'https://www.smucdn.com/smu0/o.js'
                scriptDom.setAttribute('smua', 'd=m&s=b&u=u3637413&h=120')
                adDiv[i].appendChild(scriptDom)
              }
            }
          }, 500)
        } else {
          this.noData = true
        }
      })
    },
    // 跳转到详情页
    detail (index) {
      localStorage.setItem('historyDetail', JSON.stringify(this.list[index]))
      this.$router.push('/history-detail')
      _czc.push(['_trackEvent', 'history_click'])
    }
  }
}
</script>
<style lang="scss" scoped>
  $gutter: 30px;
  $border-width: 4px;
  $dot-diameter: 8px;

  .timeline {
    width: 100%;
    max-width: 800px;
    background: #fff;
    position: relative;
    margin-top: 20px;

    &:before {
      content: '';
      position: absolute;
      top: 0px;
      left: calc(15% + 16px); //$gutter/2
      bottom: 0px;
      width: $border-width;
      background: #ddd;
    }

    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }

  .bottom {
    font-size: 16px;
  }

  .noData {
    text-align: center;
    font-size: 16px;
  }

  .entry {
    text-align: left;
    position: relative;

    .title {
      width: 15%;
      padding-right: 16px;
      text-align: right;
      position: relative;

      &:before {
        content: '';
        position: absolute;
        width: $dot-diameter;
        height: $dot-diameter;
        border: $border-width solid salmon;
        background-color: #fff;
        border-radius: 100%;
        top: 25%;
        right: -$dot-diameter;
        z-index: 0;
      }

      h3 {
        margin-top: 20px;
        font-size: 16px;
        font-style: italic;
      }

      p {
        margin: 0;
        font-size: 100%;
      }
    }

    .body {
      width: 76%;
      margin-left: 15px;
      margin-top: 15px;

      .content {
        min-height: 50px;
        margin-bottom: 10px;
        margin-right: 10px;

        p {
          flex: 5;
          margin-right: 10px;
          margin-top: 5px;
          font-size: 16px;
          text-align: justify;
        }

        img {
          flex: 2;
          width: 90px;
          height: 50px;
        }
      }

      ul {
        color: #aaa;
        padding-left: 0;
        list-style-type: none;

        li {
          margin-bottom: 10px;
          font-size: 16px;
        }
      }
    }

    .add {
      margin-left: 22%;
      width: 74%;
      font-size: 14px;
      margin-right: 10px;
    }
  }
</style>
